<!DOCTYPE html>
<html lang="zh_cn">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta name="description" content="switch,honeySwitch,switch button">
    <title>标题</title>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="lib/honeySwitch.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <script src="lib/honeySwitch.js"></script>
	<style>
		html {
			margin: 0;
			padding: 0;
			background: #fff;
    }
    
    .cssNav li{  
		    padding: 0px 45px;   
		    line-height: 40px;  
		    background: #50abe4;  
		    display: inline-block;   
		    color: #fff;  
		    position: relative;  
		}
		.cssNav li:after{  
		    content: '';  
		    display: block;  
		    border-top: 20px solid transparent;  
		    border-bottom: 20px solid transparent;  
		    border-left: 20px solid #50abe4;  
		    position: absolute;   
		    right: -19px;   
		    top: 0;  
		    z-index: 10;  
		} 
		.cssNav li:before{  
		    content: '';  
		    display: block;  
		    border-top: 20px solid #50abe4;  
		    border-bottom: 20px solid #50abe4;  
		    border-left: 20px solid #fff;  
		    position: absolute;   
		    left: 0px;   
		    top: 0;  
		}
		.cssNav li:first-child{    
		     border-radius: 4px 0 0 4px;      
		    padding-left: 46px;  
		}   
		.cssNav li:last-child{    
		    border-radius: 0px 4px 4px 0px;    
		    padding-right: 25px;   
		}    
		.cssNav li:first-child:before{    
		    display: none;    
		}
		/*.cssNav li:last-child:after{    
		    display: none;    
		}*/
		/*选中后的样式*/
		.cssNav li.active {  
		    background-color: #ef72b6;  
		}  
		.cssNav li.active:after {  
		    border-left-color: #ef72b6;  
		}
		.cssNav li.active:before {  
		    border-top-color: #ef72b6;
		    border-bottom-color: #ef72b6;  
		} 
		
	</style>
	<script>
		//honeySwitch.themeColor="lightblue";
		$(function(){
      
		});
	</script>
  </head>
  <body>
    <div class="page">
        <div class="cell-right"><span class="switch-off"></span></div>
    </div>

    <ul class="cssNav">
      <li >完成</li>
      <li class="active">等待审核</li>
</ul>


    <ul class="pagination">
      <li><a href="#">&laquo;</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">&raquo;</a></li>
    </ul>


  </body>
</html>

